<template>
	<view class="payHome">
		<view class="payHome-img">
			<image src="https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u895.svg"
				mode="scaleToFill" />
		</view>
		<view class="payHome-text">生活缴费</view>
		<view class="payHome-list">
			<view class="payHome-list-item" v-for="item in payHomeList" :key="item.id" @click="navigate(item)">
				<view class="payHome-list-item-l">
					<image
						:src="item.img"
						mode="scaleToFill" />
					<view>{{ item.name }}</view>
				</view>
				<view class="payHome-list-item-r">
					<image src="../../static/image/箭头.png" mode="scaleToFill" />
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
let payHomeList = ref([
	{
		id: 0,
		name: "电费",
		img: 'https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u911.svg',
		index:1,
	},
	{
		id: 1,
		name: "水费",
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u916.svg",
		index:0,
	},
	{
		id: 2,
		name: "燃气费",
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u901.svg",
		index:2,
	},
	{
		id: 3,
		name: "车位管理费",
		img: 'https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u921.svg'
	},
	{
		id: 4,
		name: "物业费",
		img: 'https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u906.svg'
	},
	{
		id:5,
		name:"暖气费",
		img:"https://cdn7.axureshop.com/demo/1996612/images/%E7%94%9F%E6%B4%BB%E7%BC%B4%E8%B4%B9/u926.svg",
		index:3,
	}
])
let navigate = (item)=>{
	if(item.index || item.index == 0){
		uni.navigateTo({
	   url:`/pages/waterElectric/components/payCharges?index=${item.index}`
   })
	}
  
}

</script>

<style scoped lang="scss">
.payHome {
	height: calc(100% - 100rpx);
	background-color: rgb(245, 245, 245);
	padding: 0 20rpx;
	box-sizing: border-box;
}

.payHome-img {
	image {
		width: 100%;
		height: 300rpx;
	}
}

.payHome-text {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #454545;
}

.payHome-list {
	width: 100vw;
	background-color: #fff;
	margin-left: -20rpx;
	padding: 30rpx 0rpx;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;

	.payHome-list-item {
		margin-top: 30rpx;
		height: 85rpx;
		line-height: 85%;
		width: 45%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		border: 1rpx solid #dedede;

		.payHome-list-item-l {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
		}

		.payHome-list-item-r {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;

			}
		}
	}
}
.payHome-list .payHome-list-item:nth-child(1){
	margin-top: 0 !important;
}
.payHome-list .payHome-list-item:nth-child(2){
	margin-top: 0 !important;
}
</style>
